@import "@/common/styles/colors"

.language-chooser-dialog
  margin-top: 1rem
  margin-bottom: 1rem
  display: grid
  grid-template-columns: repeat(2, 1fr)
  grid-gap: 1rem
  height: 20rem
  overflow-y: scroll

.language-chooser-item
  display: flex
  width: 10rem
  height: 2.5rem
  align-items: center
  justify-content: center
  padding: 0.5rem
  gap: 0.5rem
  cursor: pointer
  transition: background-color 0.3s
  border-radius: 0.5rem
  border: 1px solid $light-gray

  &:hover
    background-color: $darker-gray

  img
    width: 2rem
    margin-right: 0.5rem
    border-radius: 0.2rem

  p
    text-align: center
    font-size: 1.2rem
    color: $subtext

.language-selected
  background-color: $light-gray
  color: $white

  &:hover
    background-color: $light-gray

@media screen and (max-height: 425px)
  .language-chooser-dialog
    height: 15rem

@media screen and (max-height: 375px)
  .language-chooser-dialog
    height: 5rem

@media screen and (max-width: 425px)
  .language-chooser-dialog
    grid-template-columns: 1fr

  .language-chooser-item
    margin-left: 1.5rem
    margin-right: 1.5rem